<template>
  <div>
    <Select />
  </div>
  <div class="bg">
    <div class="form">
      <div class="logo">
        <img src="../../assets/imgs/logo.png" alt="" />
      </div>
      <div class="box1">
        <!-- <div class="inner inner1">
          <el-select v-model="value" class="m-2" style="width: 100%;">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div> -->
        <div class="inner inner2">
          <el-input v-model="email" :placeholder="$t('邮箱')" />
        </div>
        <div class="inner inner3">
          <el-input type="password" v-model="password" :placeholder="$t('密码')" />
        </div>
        <div class="inner inner4">
          <div style="display: flex">
            <el-input
              v-model="inputCode"
              style="width: 210px; margin-right: 10px"
              :placeholder="$t('验证码')"
            />
            <div :class="'code'" @click="createCode">{{ code }}</div>
          </div>
        </div>
        <div class="inner inner5">
          <div
            style="
              width: 100%;
              height: 45px;
              border-radius: 5px;
              background-color: #f6d39c;
              display: flex;
              justify-content: center;
              align-items: center;
              margin-right: 10px;
              cursor: pointer;
              border: none;
            "
            class="bt"
            @click="Login"
          >
            <span>{{ $t("登录") }}</span>
          </div>
        </div>
        <div class="inner inner6">
          <el-checkbox v-model="rememberMe" :label="$t('自动登录')" size="large" />
          <a href="http://43.139.121.71:1018/#/retrieve" target="_">
            <span style="color: white">{{ $t("找回密码") }}</span>
          </a>
        </div>
        <a href="http://43.139.121.71:1018/#/register" target="_" class="inner inner7">
          <span style="color: #f6d39c">{{ $t("注册") }}</span>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import { ElNotification } from "element-plus";
import Select from "@/components/select.vue";
import { userLoginApi } from "@/api";
import router from "@/router";
export default {
  name: "LoginPage",
  components: {
    Select,
  },
  data() {
    return {
      rememberMe: false,
      code: "",
      inputCode: "",
      email: "",
      password: "",
    };
  },
  methods: {
    // 检查本地存储中是否存在 rememberMeInfo
    checkRememberMeInfo() {
      const rememberMeInfo = localStorage.getItem("rememberMeInfo");
      if (rememberMeInfo) {
        // 如果存在，解析 JSON 字符串
        const userInfo = JSON.parse(rememberMeInfo);
        console.log(userInfo);
        // 回显到输入框
        if (userInfo.email) {
          // 回显邮箱
          this.email = userInfo.email;
        }
        if (userInfo.password) {
          // 回显密码
          this.password = userInfo.password;
        }
      }
    },
    createCode() {
      var code = "";
      var codeLength = 4;
      var codeChars = "0123456789";
      for (var i = 0; i < codeLength; i++) {
        var charNum = Math.floor(Math.random() * codeChars.length);
        code += codeChars.charAt(charNum);
      }
      this.code = code;
    },

    Login() {
      const email = this.email;
      const password = this.password;
      console.log(this.rememberMe);
      // 判断是否勾选了记住我
      if (this.rememberMe) {
        // 处理记住我逻辑，比如将登录信息存储在localStorage中
        localStorage.setItem("rememberMeInfo", JSON.stringify({ email, password }));
      } else {
        // 清除本地存储中的rememberMeInfo
        localStorage.removeItem("rememberMeInfo");
      }
      if (!this.inputCode) {
        ElNotification({
          title: "Error",
          message: this.$t("请输入验证码"),
          type: "error",
        });
        return;
      }
      if (this.inputCode != this.code) {
        ElNotification({
          title: "Error",
          message: this.$t("验证码错误"),
          type: "error",
        });
        return;
      }
      userLoginApi({
        email,
        password,
      }).then((res) => {
        // 提示登录
        ElNotification({
          type: "success",
          message: res.msg,
          duration: 1000,
          onClose: () => {
            if (res.code == 1) {
              // 获取返回的token
              const token = res.data.token;
              // 将token存储在localStorage中
              localStorage.setItem("token", token);
              // 跳转到/dashboard页面
              router.push("/");
            }
          },
        });
      });
    },
  },
  mounted() {
    this.createCode();
    this.checkRememberMeInfo();
  },
};
</script>

<style lang="scss" scoped>
.bg {
  width: 100%;
  height: 100vh;
  background-image: url("https://trader.dgctcfx.com/Upload/SystemImages/20230613/20230613145913992_20230530151010777_BackgroundImage3.jpg");
  background-size: 100% 108%;

  display: flex;
  justify-content: center;
  align-items: center;

  .form {
    padding: 24px;
    box-sizing: border-box;
    background-color: #282b37;
    height: 470px;
    width: 350px;
    border-radius: 15px;

    .logo {
      margin-bottom: 20px;

      img {
        width: 302px;
        height: 72px;
      }
    }

    .box1 {
      .code {
        font-family: Arial;
        font-style: italic;
        color: blue;
        font-size: 20px;
        border: 0;
        padding: 2px 0;
        font-weight: bolder;
        cursor: pointer;
        width: 80px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background-color: #ffffff;
      }

      .inner {
        margin-bottom: 15px;
      }

      .inner6 {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .inner7 {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      a {
        text-decoration: none;
      }
    }
  }
}
::v-deep .header_right_lang {
  position: fixed;
  right: 40px;
  top: 40px;
  color: #ddd;
}
</style>
